<template>
    <div id="app">
        <div align="center" style="padding-top: 50px; padding-bottom: 20px;">
            <van-image width="100%" height="122px" :src="logo2Src" />
        </div>


        <DemoBlock title="用户登录">
            <van-form @submit="onSubmit">
                <van-field v-model="username" name="学号" label="学号" placeholder="学号" :rules="[{ required: true, message: '请填写学号' }]" />
                <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="button" color="linear-gradient(to right, #ff6034, #ee0a24)"
                        @click="onSubmit()">
                        登录
                    </van-button>
                </div>
            </van-form>
        </DemoBlock>
    </div>
</template>

<script>
    import DemoBlock from '@/components/DemoBlock.vue'
    export default {
        name: 'Login',
        components: {
            DemoBlock
        },
        data() {
            return {
                username: '',
                password: '',
                logo2Src: ''
            }
        },
        methods: {
            onSubmit() {
                let that = this;
                this.$axios.post('/api/user/login', {
                        username: this.username,
                        password: this.password
                    })
                    .then(function(response) {
                        console.log(response);
                        if (response.data.code == 200) {
                            console.log('Code is 200')
                            // 持久化存储token
                            that.$store.set('state.token', response.data.data)
                            
                            // that.setToken(response.data.data)
                            
                            //根据store中set_token方法将token保存至localStorage/sessionStorage中，data["Authentication-Token"]，获取token的value值
                            that.$store2.commit('setToken', response.data.data );
                            
                            console.log('Get Store Token:', that.$store.get('state.token'));
                            
                            that.$router.push('/');

                        } else {
                            this.$notify('账号密码不正确');
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                        // alert('网络错误');
                    });
            },
            validatorUsername(val) {
                return /1\d{11}/.test(val);
            },
            validatorPassword(val) {
                return true;
            }
        },
        created() {
            this.logo2Src = require("@/assets/logo21.png");
            // console.log(this.$store.get('local_test'));
            this.$store.set('local_test', 'Hello Yayayay')
        }
    }
</script>

<style lang="css" scoped="scoped">
    #app {
        background-color: #F7F8FA;
    }
</style>
